<template>
  <div>
    <div>
      <!-- 引入全局工具栏组件 -->
      <page-tools>
        <!-- 插入到left插槽位置 -->
        <template #left>
          <div class="tips">
            <i class="el-icon-info" />
            <span>本月: 社保在缴 公积金在缴</span>
          </div>
        </template>
        <!-- 插入到right插槽位置 -->
        <template #right>
          <el-button
            type="warning"
            size="small"
            @click="$router.push('/import')"
          >导入excel</el-button>
          <el-button type="info" size="small" @click="exportExcel">导出excel</el-button>
          <el-button type="primary" size="small" @click="addEmploy">新增员工</el-button>
        </template>
      </page-tools>
      <!-- 表格部分 -->
      <el-card style="margin-top: 10px">
        <el-table :data="list" border>
          <el-table-column label="序号" type="index" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="头像" width="100px">
            <template #default="scope">
              <el-image :src="scope.row.staffPhoto" class="avatar">
                <!-- 具名插槽新语法  图片加载出错的时候自动显示 -->
                <template #error>
                  <!-- 可以放一个小图标表示错误，或者放一张图片，更好的优化 -->
                  <!-- <i class="el-icon-picture-outline" /> -->
                  <img src="@/assets/loading.jpg" width="80">
                </template>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="工号" prop="workNumber" />
          <!-- 这里我们把聘用形式单拿出来，改一下格式 -->
          <el-table-column label="聘用形式">
            <!-- 使用默认插槽 -->
            <template #default="{ row }">
              <!-- 思路：编写一个格式化的函数，在函数里面写好有效的格式化，最后渲染出来的就是这个函数的返回值，里面从实参就是prop -->
              {{ formatEmployment(row.formOfEmployment) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <!-- 这里我们把入职时间单拿出来，改一下格式 -->
          <el-table-column label="入职时间" width="180" prop="timeOfEntry">
            <!-- 使用默认插槽 -->
            <template #default="{ row }">
              <!-- 思路：编写一个格式化的函数，在函数里面写好有效的格式化，最后把格式化的数据return -->
              {{ formatTime(row.timeOfEntry) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="{row}">
              <el-button
                type="text"
                size="small"
                @click="goDetail(row.id)"
              >
                查看
              </el-button>
              <el-button type="text" size="small" @click="assignRole(row.id)">分配角色</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <!-- 页数 = 总条数(total) / 每页条数(page-size) -->
          <!-- 这里绑定一个@current-change事件是ui组件给我们的，表示当前页发生变化时自动触发 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="params.size"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
    </div>
    <!-- 使用子组件 -->
    <AddEmployee
      :dialog-visible="dialogVisible"
      @close-dialog="CloseDialog"
      @update-list="getList"
    />
    <!-- 分配角色的弹框 -->
    <el-dialog class="assign-role" title="分配角色" :visible="showRoleDialog" @open="roleOpen" @close="showRoleDialog=false">
      <!-- 这里准备复选框 -->
      <!-- el-checkbox-group可以把多个多选管理为一组-->
      <el-checkbox-group v-model="checkList">
        <!-- v-for遍历渲染列表 -->
        <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">
          <!-- 问题：显示的是英文的id，因为label绑定的就是英文id，所以里面我们使用插槽，让它是中文显示 -->
          {{ item.name }}
        </el-checkbox>
      </el-checkbox-group>
      <template #footer>
        <el-button type="primary" size="small" @click="confirmAssign">确定</el-button>
        <el-button size="small" @click="showRoleDialog=false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
// 引入api接口
import { getEmployeeListAPI, assignRolesAPI } from '@/api/employees'
// 引入dayjs
import dayjs from 'dayjs'
// 引入子组件并注册
import AddEmployee from './components/add-employee.vue'
// 导入对象数组转二维数组的方法
import { getExportData } from '@/utils/excel'
// 引入api接口--获取角色列表数据
import { getRoleListAPI } from '@/api/setting'
// 引入api接口--获取用户信息--用于数据回填
import { getUserIdAPI } from '@/api/user'
export default {
  name: 'Employee',
  components: { AddEmployee },
  data() {
    return {
      list: [], // 列表数据项
      // 数据项 是接口给我们的
      params: {
        page: 1, // 当前页
        size: 10 // 每页几条
      },
      total: 0, // 总数,
      dialogVisible: false, // 控制弹框
      showRoleDialog: false, // 分配角色的弹框
      checkList: [], // 多选框的列表label值
      roleList: [], // 可选的角色列表
      curId: ''
    }
  },
  mounted() {
    // 渲染页面列表数据
    this.getList()
  },
  methods: {
    // 页面数据渲染
    async getList() {
      const res = await getEmployeeListAPI(this.params)
      this.list = res.rows
      this.total = res.total
    },
    // 格式化聘用形式
    formatEmployment(value) {
      // if (value === '1') {
      //   return '正式'
      // } else if (value === '2') {
      //   return '非正式'
      // } else {
      //   return '其他'
      // }

      // 和if类似，这种枚举（把所有对应关系列出来）的方式更简单，对应关系更清晰，是一个对象（作用就是优化多分支语句）
      const map = {
        // 如果value为1就是正式员工
        1: '正式',
        2: '非正式',
        4: '其他'
      }
      return map[value] // 对象的取值，value作为key
    },
    // 格式化入职日期
    formatTime(value) {
      return dayjs(value).format('YYYY-MM-DD')
    },
    // 分页渲染页面--current-Change事件
    currentChange(page) {
      // 把params里的page重新赋值为最新的page
      this.params.page = page
      // 然后立刻发送请求,把拿到的数据重新给roleList
      this.getList()
    },
    // 关闭弹框的回调
    CloseDialog() {
      this.dialogVisible = false
    },
    // 新增员工--点击事件
    addEmploy() {
      // 打开弹框
      this.dialogVisible = true
    },
    // 导出下载excel--点击事件
    exportExcel() {
      import('@/vendor/Export2Excel').then(async(excel) => {
        // console.log(excel) // 里面有两个方法
        // export_json_to_excel: 把json转成excel格式  [我们用这个]
        // export_table_to_excel: 把table转成excel格式
        // 1，调用api接口---后端真实的数据
        const res = await getEmployeeListAPI(this.params)
        // 2，数据中英文匹配不上，需要二次处理
        const headerRelation = {
          '姓名': 'username',
          '手机号': 'mobile',
          '入职日期': 'timeOfEntry',
          '工号': 'workNumber',
          '聘用形式': 'formOfEmployment',
          '部门': 'departmentName'
        }
        // 3，转换数据格式
        // 这个data就是二维数组，rows就是我们的数据列表，第二个参数是中英文的对应关系
        const { data } = getExportData(res.rows, headerRelation)
        excel.export_json_to_excel({
          header: Object.keys(headerRelation), // 表头 要求是一个数组
          data: data, // 表体 要求是一个二维数组
          filename: 'excel-list', // 文件名称 要求是一个字符串
          autoWidth: true, // 宽度是否自适应 要求是一个布尔值
          bookType: 'xlsx' // 生成的文件类型 要求是一个字符串
        })
      })
    },
    // 点击查看路由跳转--点击事件
    goDetail(id) {
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    },
    // 点击分配角色
    assignRole(id) {
      this.showRoleDialog = true
      this.curId = id // 暂存
    },
    // 分配角色弹框打开时的回调--@open
    async  roleOpen() {
      // 调用api接口--获得角色列表数据
      const res = await getRoleListAPI()
      this.roleList = res.rows
      // 调用api接口--获取用户信息
      const res2 = await getUserIdAPI(this.curId)
      this.checkList = res2.roleIds
    },
    // 点击确定--点击事件
    async confirmAssign() {
      // 调用给员工分配角色接口
      await assignRolesAPI({
        id: this.curId,
        roleIds: this.checkList
      })
      this.showRoleDialog = false
      this.$message.success('分配角色成功')
    }
  }
}
</script>

<style>
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
</style>
